<template>
	<div class="home-container layout-pd">
		<div class="title">刷题路线推荐</div>
		<div class="search">
			<el-input v-model="input" placeholder="请输入内容" class="input"></el-input>
			<el-button type="primary" round class="btn">搜索</el-button>
		</div>
		<div class="content">
			<!-- 使用 v-for 循环渲染 route 数组 -->
			<div v-for="(item, index) in state.route" :key="index" class="route-item" @click="toRoute_content">
				<h3>{{ item.name }}</h3>
				<p class="desp">{{ item.desp }}</p>
				<div class="tags">
					<!-- 渲染标签 -->
					<span v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">
						{{ tag }}
					</span>
				</div>
				<p class="time">{{ item.time }}</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, watch, onActivated } from 'vue';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useRouter } from 'vue-router';
// 获取路由实例
const router = useRouter();

// const handleClick = (tab, event) => {
// 	// eslint-disable-next-line no-console
// 	//console.log(tab, event);
// };
const storesTagsViewRoutes = useTagsViewRoutes();
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
	route: [
		{
			name: 'java刷题路线',
			desp: '扎实计算机网络、操作系统基础、Java基础、深入理解Java集合与并发、掌握Java虚拟机原理，以及熟悉常用的数据库（MySQL）和缓存（Redis）技术',
			tags: ['Java', 'Java刷题路线'],
			time: '2022/2/3',
		},
		{
			name: 'java刷题路线',
			desp: '扎实计算机网络、操作系统基础、Java基础、深入理解Java集合与并发、掌握Java虚拟机原理，以及熟悉常用的数据库（MySQL）和缓存（Redis）技术',
			tags: ['Java', 'Java刷题路线'],
			time: '2022/2/3',
		},
		{
			name: 'java刷题路线',
			desp: '扎实计算机网络、操作系统基础、Java基础、深入理解Java集合与并发、掌握Java虚拟机原理，以及熟悉常用的数据库（MySQL）和缓存（Redis）技术',
			tags: ['Java', 'Java刷题路线'],
			time: '2022/2/3',
		},
		{
			name: 'java刷题路线',
			desp: '扎实计算机网络、操作系统基础、Java基础、深入理解Java集合与并发、掌握Java虚拟机原理，以及熟悉常用的数据库（MySQL）和缓存（Redis）技术',
			tags: ['Java', 'Java刷题路线'],
			time: '2022/2/3',
		},
	],
});
const toRoute_content = () => {
	router.push('/route_content');
};

// 页面加载时
onMounted(() => {});
// 由于页面缓存原因，keep-alive
onActivated(() => {});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {}
);
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	display: flex;
	flex-direction: column;
	height: 85vh; /* 容器占满整个视口高度 */
	overflow: hidden; /* 禁止页面滚动 */
	.title {
		width: 100%;
		height: 40px;
		font-weight: 800;
		font-size: 25px;
		margin: 20px;
		margin-bottom: 0px;
	}
	.search {
		width: 100%;
		height: 50px;
		margin: 0px 15px;
		display: flex; /* 启用 Flexbox 布局 */
		align-items: center; /* 垂直居中 */
		justify-content: flex-start; /* 水平排列（从左到右） */
		.input {
			width: 250px;
			margin-right: 20px;
		}
		margin-bottom: 10px;
	}
	.content {
		overflow-y: auto;
		height: 85%;
	}
	.route-item {
		margin: 0px 15px;
		margin-bottom: 20px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.route-item h3 {
		margin: 0 0 10px;
		font-size: 18px;
		color: #333;
	}
	
	.desp {
		margin: 0 0 10px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
	
	.tags {
		display: flex;
		gap: 8px;
		margin-bottom: 10px;
	}
	
	.tag {
		padding: 4px 8px;
		background-color: #e0f7fa;
		border-radius: 4px;
		font-size: 12px;
		color: #00796b;
	}
	
	.time {
		margin: 0;
		font-size: 12px;
		color: #999;
	}
}
</style>
